/* Index
1 - Definitions
1.1 - Backgrounds
1.2 - Text
1.3 - Messages
1.4 - Borders
1.5 - Slides
1.6 - Toggles
1.7 - Overriding Ionic Variables

3 - General
3.1 - Lists
3.2 - Label tip
3.3 - General cards
3.4 - Expandable header
3.5 - Toolbar

4 - Components

5 - Tabs
5.1 - Tab Home
5.2 - Tab Wallets
5.3 - Tab Cards
5.4 - Tab Settings

6 - Other Pages

7 - Buy Crypto

8 - Exchange Crypto

9 - Onboarding

10 - New Features Slides
*/

.dark {
  // 1 - Definitions
  // 1.1 - Backgrounds
  $bg-color-dark-theme: #121212;
  $bg-color-dark-theme-2: #1d1d1d;
  $bg-color-dark-theme-3: #383838;
  $bg-color-dark-theme-4: rgba(56, 56, 56, 0.8);

  $bg-color-dark-theme-toolbar: #121212;
  $bg-color-dark-theme-message: #1d1d1d;
  $gradient-dark-theme: #101010;

  // 1.2 - Text
  $text-color-dark-theme: rgba(255, 255, 255, 0.87);
  $text-color-dark-theme-2: rgba(255, 255, 255, 0.6);
  $text-color-dark-theme-3: rgba(255, 255, 255, 0.38);

  // 1.3 - Messages
  $bg-color-warning: #ffe7d9;

  // 1.4 - Borders
  $border-color-dark-theme: rgb(76, 76, 76);
  $border-color-dark-theme-2: rgba(76, 76, 76, 0.3);

  // 1.5 - Slides
  $swiper-pagination-bullet-active: #434c5a;
  $swiper-pagination-bullet: #4f4f4e;

  // 1.6 - Toggles
  $toggle-color-dark-theme: #afafaf;

  // 1.7 - Overriding Ionic Variables
  $background-color: $bg-color-dark-theme;

  @include toolbar-button-color($text-color-dark-theme);

  // TODO: Remove text opacity from default styles
  page-bitpay-card ion-title .toolbar-title,
  .wallet-details-header ion-title .toolbar-title,
  page-copayers .copayers-header-content .text,
  page-finish .container .content .body-comment,
  page-home .total-amount-container .average-container .date,
  page-scan .page-scan-has-problems .header-container .subtitle,
  page-addressbook .zero-state-description,
  page-wallet-details .balance-alt-str,
  page-wallet-details .balance-spendable,
  page-wallet-details .tx-history .date,
  .bp-list .secondary-note {
    opacity: 1;
  }

  page-add-wallet,
  options-sheet {
    .bp-list ion-icon.item-img.icon.item-icon.icon-settings {
      &.icon-md,
      &.icon-ios {
        opacity: 1;

        img {
          filter: invert(1);
        }
      }
    }
  }

  // 3 - General
  ion-content {
    background-color: $bg-color-dark-theme;
    color: $text-color-dark-theme;
  }

  ion-loading {
    .loading-wrapper {
      background-color: $bg-color-dark-theme-2;
      color: $text-color-dark-theme;
    }
  }

  coin-icon {
    ion-icon.item-img.icon.background_xrp {
      background-color: color($colors, dark);

      &.testnet {
        filter: invert(0.2);
      }
    }
  }

  form {
    .item-md.item-block .item-inner {
      border-bottom: 1px solid $border-color-dark-theme;
    }
  }

  .line-divider {
    border: 0.5px solid $border-color-dark-theme-2;
  }

  .royal,
  a.royal {
    color: $text-color-dark-theme;
  }

  .item-divider-md,
  .item-divider-ios {
    background-color: $bg-color-dark-theme;
  }

  .tabs-md,
  .tabs-ios {
    .tabbar {
      background-color: $bg-color-dark-theme;
    }

    .tab-button[aria-selected='true'] {
      opacity: 1;
    }
    .tab-button[aria-selected='false'] {
      ion-icon {
        &[class*='tab-home'],
        &[class*='tab-wallets'],
        &[class*='tab-cards'],
        &[class*='tab-settings'] {
          opacity: 0.4;
        }
        &[class*='tab-scan'] {
          background: url('../assets/img/tab-icons/tab-scan-dm.svg') no-repeat
            50% 50%;
        }
        &[class*='tab-copay-scan'] {
          filter: invert(0.4);
          opacity: 1;
        }
      }
    }
  }

  .swiper-pagination-bullet-active {
    background-color: $swiper-pagination-bullet-active;
  }

  .swiper-pagination-bullet {
    background-color: $swiper-pagination-bullet;
  }

  button.item.activated,
  .item-md.activated {
    background-color: $bg-color-dark-theme-2;
  }

  .gift-card-content {
    .header-extension {
      background: $bg-color-dark-theme-toolbar;
    }
  }

  .box-notification {
    &.success,
    &.info,
    &.warning,
    &.error {
      background: none;
      border: 1px solid;
    }
  }

  .toggle-ios,
  .toggle-md {
    .toggle-icon {
      background-color: $bg-color-dark-theme-3;

      &::before {
        background-color: $bg-color-dark-theme-3;
      }

      .toggle-inner {
        background-color: $toggle-color-dark-theme;
      }
    }
  }

  .alert-ios {
    .alert-button {
      border-color: $bg-color-dark-theme-3;
    }

    .alert-input {
      border-color: $bg-color-dark-theme-3;
    }
  }

  ion-alert {
    .alert-wrapper {
      background: $bg-color-dark-theme-2;
      color: $text-color-dark-theme;

      .alert-title {
        color: $text-color-dark-theme;
      }
    }

    .alert-radio-group {
      .alert-radio:not([aria-checked='true']) .alert-radio-label {
        color: $text-color-dark-theme;
      }
    }

    .alert-input {
      color: $text-color-dark-theme;
      background: $bg-color-dark-theme;
      color: $text-color-dark-theme;
    }
    .alert-message {
      color: $text-color-dark-theme;
    }
  }

  .alert-ios .alert-button ion-action-sheet {
    .action-sheet-group {
      background: $bg-color-dark-theme-2;
      color: $text-color-dark-theme;

      .action-sheet-button {
        color: $text-color-dark-theme;
      }
    }
  }

  .search-container {
    background-color: $bg-color-dark-theme;
  }

  .search-wrapper {
    background-color: $bg-color-dark-theme-2;
    color: $text-color-dark-theme-2;
  }

  search-bar {
    background: $bg-color-dark-theme;

    ion-input {
      background: $bg-color-dark-theme-message;
      color: $text-color-dark-theme;
    }
  }

  action-sheet search-bar {
    background: $bg-color-dark-theme-2;

    ion-input {
      background: #292929;
    }
  }

  add-button {
    .add-button {
      &__icon {
        filter: invert(1);
      }

      &__text {
        color: $text-color-dark-theme-2;
      }
    }
  }

  .prompt-user {
    .title-info {
      color: $text-color-dark-theme;
    }

    .subtitle-info {
      color: $text-color-dark-theme-2;
    }
  }

  .gravatar-img {
    filter: invert(1);
  }

  .alertTheme {
    color: $text-color-dark-theme;

    .alert-message {
      color: $text-color-dark-theme;
    }

    .alert-wrapper {
      background-color: $bg-color-dark-theme-2;
    }
  }

  .alertDanger {
    .alert-message {
      color: color($colors, danger);
    }

    color: $text-color-dark-theme;

    .alert-wrapper {
      background-color: $bg-color-dark-theme-2;
    }

    .alert-input {
      color: $text-color-dark-theme;
    }
  }

  .toast-bg {
    .toast-wrapper {
      background-color: $bg-color-dark-theme-2;
      color: $text-color-dark-theme-2;
    }
  }

  // 3.1 Lists
  .bp-list {
    .item {
      &.item-ios,
      &.item-md {
        border: 0;
        background-color: $bg-color-dark-theme;
      }

      &:not(.create-button):not(.assertive) {
        &.item-ios,
        &.item-md {
          color: $text-color-dark-theme;
        }
      }
    }

    .main-label,
    .main-note,
    .status .royal {
      color: $text-color-dark-theme;
    }

    ion-item-divider {
      background: $bg-color-dark-theme-2;

      .label {
        color: $text-color-dark-theme-3;
      }
    }

    .summary-item-detail {
      color: $text-color-dark-theme;

      .text-input {
        color: $text-color-dark-theme;
        opacity: 1;
      }
    }

    .total-amount {
      color: $text-color-dark-theme;
    }
  }

  .button-secondary {
    background-color: $bg-color-dark-theme-3;
    color: $text-color-dark-theme-2;

    &:hover,
    &:focus,
    &:active {
      &.button-md,
      &.button-ios {
        background-color: $bg-color-dark-theme-2;
        color: $text-color-dark-theme-2;
      }
    }

    &:active,
    &.activated {
      &.button-md,
      &.button-ios {
        background-color: $bg-color-dark-theme-2;
        color: $text-color-dark-theme-2;
      }
    }
  }

  // 3.2 - Label tip
  label-tip {
    opacity: 0.7;
    color: $text-color-dark-theme-2;

    &[type='info'] {
      background-color: $bg-color-dark-theme-4;

      &:before {
        border-bottom-color: $bg-color-dark-theme-4;
      }
    }

    &[type='warn'] {
      background-color: $bg-color-dark-theme-4;

      &:before {
        border-bottom-color: $bg-color-dark-theme-4;
      }
    }

    &[type='danger'] {
      background-color: $bg-color-dark-theme-4;

      &:before {
        border-bottom-color: $bg-color-dark-theme-4;
      }
    }

    .label-header {
      color: $text-color-dark-theme;
    }
  }

  // 3.3 - General cards
  action-card-v4.card {
    background-color: $bg-color-dark-theme-2;

    .action-card__content {
      background-color: $bg-color-dark-theme-2;

      .action-card__title {
        color: $text-color-dark-theme;
      }
    }

    .bitpay-card-header,
    .home-gift-card-header {
      background-color: $bg-color-dark-theme-3;
    }
  }

  action-card.card {
    background: $bg-color-dark-theme-2;

    .action-card {
      &__content {
        background: $bg-color-dark-theme-2;
      }
    }
  }

  .card {
    page-txp {
      .proposal-container .item-inner {
        border-bottom: 1px solid $border-color-dark-theme-2;
      }
    }
  }

  .offer-card {
    background: $bg-color-dark-theme-2;
    .main-label {
      color: $text-color-dark-theme;
    }
    .extended-info .bp-list {
      .item {
        background: $bg-color-dark-theme-2;
        &:not(:last-child) {
          border-top: 1px dashed #434d5a;
        }
      }
      .total {
        color: white;
      }
    }
    .terms {
      color: #8e8d8d;
    }
  }

  // 3.4 - Expandable header
  ion-content.add-padding-bottom,
  .add-padding-bottom ion-content {
    .fixed-content,
    .scroll-content {
      background-color: $bg-color-dark-theme;
    }
  }

  .wide-header__title {
    color: $text-color-dark-theme;
    background: $bg-color-dark-theme;
  }

  wide-header-page,
  card-catalog-page {
    .wide-header {
      .toolbar-background {
        background: $bg-color-dark-theme-toolbar;
      }
    }
  }

  .header-extend {
    background: $bg-color-dark-theme-toolbar;
  }

  // 3.5 - Toolbar
  .content-ios .toolbar-background-ios {
    background: $bg-color-dark-theme;
  }

  .toolbar-background-md,
  .toolbar-background-ios {
    background: $bg-color-dark-theme;
    color: $text-color-dark-theme;
  }

  .bar-button-default-md,
  .bar-button-default.bar-button-md-default,
  .bar-button-clear-md-default {
    color: $text-color-dark-theme !important;
  }

  .toolbar-content-md,
  .toolbar-content-ios {
    color: $text-color-dark-theme;

    .bar-buttons-md,
    .bar-buttons-ios {
      .bar-button .button-inner {
        color: $text-color-dark-theme-2;
      }
    }
  }

  .toolbar-title {
    color: $text-color-dark-theme;
  }

  .header .toolbar-background {
    background-color: $bg-color-dark-theme;
  }

  .toolbar {
    &.toolbar-md,
    &.toolbar-ios {
      .back-button,
      .close-container {
        background-color: $bg-color-dark-theme-2;
        color: $text-color-dark-theme !important;

        &.button-default,
        &.button-md.activated,
        &.button-ios.activated {
          background-color: $bg-color-dark-theme-2;
        }
      }
    }
  }

  page-bitpay-card {
    .toolbar {
      &.toolbar-md,
      &.toolbar-ios {
        .back-button {
          background-color: rgba(155, 163, 174, 0.12);
        }
      }
    }

    ion-spinner {
      * {
        stroke: $text-color-dark-theme !important;
      }
    }
  }

  page-bitpay-card-intro {
    ion-toolbar {
      background-color: $bg-color-dark-theme-2;
    }
  }

  // 4 - Components
  action-sheet {
    .action-sheet {
      background: $bg-color-dark-theme-2;

      .bp-list {
        .item {
          &.item-ios,
          &.item-md {
            background-color: $bg-color-dark-theme-2;
            color: $text-color-dark-theme;
          }
        }
      }
      .item {
        &.item-ios,
        &.item-md {
          background-color: $bg-color-dark-theme-2;
        }
      }
    }
  }

  amount-picker {
    .amount-picker {
      &__amount {
        color: $color-primary;
      }

      &__button {
        border-color: $color-primary;

        img {
          filter: brightness(1.7) hue-rotate(8deg);
        }
      }
    }
  }

  info-sheet {
    .info-container {
      background-color: $bg-color-dark-theme-2;

      info-sheet-template {
        .confirm-sheet {
          background-color: $bg-color-dark-theme-2;
          color: $text-color-dark-theme;

          .sheet-title {
            color: $text-color-dark-theme;
          }

          .sheet-text {
            color: $text-color-dark-theme-2;
          }

          .sheet-btn-group {
            border-top: 1px solid $border-color-dark-theme;

            .sheet-btn.default,
            .sheet-second-btn {
              color: $text-color-dark-theme-2;
            }
          }
        }
      }
    }
  }

  wallet-selector {
    .item-divider-md,
    .item-divider-ios {
      background-color: $bg-color-dark-theme-2;
      border-bottom: 1px solid $bg-color-dark-theme-2;
    }
  }

  memo-component {
    .text-input {
      background-color: $bg-color-dark-theme;
      color: $text-color-dark-theme;
    }

    .title {
      color: $text-color-dark-theme;
    }
  }

  page-choose-fee-level {
    .testnet-warning {
      background-color: color($colors, warning);
    }

    .fee {
      &-speed-name {
        color: $text-color-dark-theme;
      }

      &-speed-satByte {
        color: $text-color-dark-theme;
      }

      &-avg-label {
        color: $text-color-dark-theme;
      }

      &-avg-time {
        color: $text-color-dark-theme;
      }

      &-card {
        background-color: $bg-color-dark-theme;

        .item {
          &.item-ios,
          &.item-md {
            background: $bg-color-dark-theme;
            color: $text-color-dark-theme;
          }
        }
      }
    }
  }

  page-slide-to-accept {
    background: linear-gradient(
      to bottom,
      rgba(18, 18, 18, 0),
      rgba(18, 18, 18, 1),
      rgba(18, 18, 18, 1)
    );
    background: -webkit-linear-gradient(
      to bottom,
      rgba(18, 18, 18, 0),
      rgba(18, 18, 18, 1),
      rgba(18, 18, 18, 1)
    );
  }

  page-fingerprint {
    ion-content {
      background-color: $bg-color-dark-theme !important;
    }

    .fingerprint-header {
      border-bottom: 1px solid $border-color-dark-theme;
      background-color: $bg-color-dark-theme-2;

      .title {
        color: $text-color-dark-theme;
      }
    }
  }

  page-pin {
    ion-header {
      .toolbar-background {
        background-color: $bg-color-dark-theme;
      }
    }
    ion-content {
      background-color: $bg-color-dark-theme !important;
    }
    .pin-header {
      .title {
        color: $text-color-dark-theme;
      }
    }
    .content {
      background-color: $bg-color-dark-theme;
    }
  }

  page-feedback-card {
    ion-card.card {
      background-color: $bg-color-dark-theme-2;
      color: $text-color-dark-theme;
    }
  }

  incoming-data-menu {
    img {
      filter: invert(0.7);
    }
  }

  page-finish {
    .bg-none {
      background-color: $bg-color-dark-theme;
    }
    .container {
      .content {
        .body {
          &-text {
            &.bg-none {
              color: $text-color-dark-theme;
            }
          }
        }
      }
    }
  }

  encrypt-password,
  miner-fee-warning {
    action-sheet {
      .action-sheet-bottom {
        background: $bg-color-dark-theme;
        .encrypt-password,
        .miner-fee {
          .encrypt-password-info,
          .miner-fee-info {
            .info {
              .title {
                color: $text-color-dark-theme;
              }
              .text {
                color: $text-color-dark-theme-2;
                b {
                  color: $text-color-dark-theme;
                }
              }
            }
          }
          .encrypt-password-form {
            .slide-title {
              color: $text-color-dark-theme;
            }
            form {
              ion-item {
                background-color: $bg-color-dark-theme;
                color: $text-color-dark-theme;
                ion-label {
                  &.label-ios,
                  &.label-md {
                    color: $text-color-dark-theme-2;
                  }
                }
                ion-input {
                  input[type='password'],
                  input[type='text'] {
                    color: $text-color-dark-theme;
                  }
                }
              }
              .item-inner {
                border-bottom-color: $border-color-dark-theme !important;
              }
              button {
                .ion-md-eye:before,
                .ion-md-eye-off:before {
                  color: $text-color-dark-theme-2;
                }
              }
            }
          }
        }
      }
    }
  }

  // 5 - Tabs
  // 5.1 Tab Home
  page-home {
    .total-amount-container {
      .total-amount-value {
        color: $text-color-dark-theme;
      }
    }

    .section-header .date-label {
      background-color: $bg-color-dark-theme-2;
    }

    .message {
      &-background {
        background-color: $bg-color-dark-theme-message;
      }
    }
  }

  // 5.15 Price Page
  price-page {
    .total-amount-container {
      .total-amount-value {
        color: $text-color-dark-theme;
      }
    }

    .labels {
      .inactive {
        color: $text-color-dark-theme;
      }
    }
  }

  // 5.2 - Tab Wallets
  page-wallets {
    .collapse > .collapse-btn {
      background: $bg-color-dark-theme-2;
    }

    .section-header {
      border-bottom: 1px solid $border-color-dark-theme;
    }

    .collapse .item-img {
      filter: invert(1);
    }
  }

  page-txp {
    .item {
      &.item-ios,
      &.item-md {
        background-color: $bg-color-dark-theme-2;
        color: $text-color-dark-theme;
      }
    }

    ion-note .amount {
      color: $text-color-dark-theme;
    }
  }

  page-txp-details {
    .proposal-deletion {
      background-color: $bg-color-dark-theme;
    }

    .proposal-rejection {
      background-color: $bg-color-dark-theme;
    }

    ion-note.note {
      .wallet {
        .note-container {
          color: $text-color-dark-theme;
        }
      }
    }
  }

  page-copayers,
  page-txp-details,
  page-tx-details {
    .timeline-item {
      background-color: $bg-color-dark-theme;
    }
  }

  page-confirm,
  confirm-card-purchase-page,
  page-txp-details,
  page-tx-details,
  page-bitpay-card-topup,
  page-create-eth-multisig {
    .payment-proposal-to {
      background-color: $bg-color-dark-theme-2;
      color: $text-color-dark-theme;
    }

    .wallet,
    .multi-recip-title {
      span {
        color: $text-color-dark-theme;
      }
    }

    .bp-list {
      .summary-item,
      .total-amount-note,
      .secondary-note {
        color: $text-color-dark-theme;
      }

      ion-note.note {
        .note-container {
          color: $text-color-dark-theme;
        }
      }
    }

    .background-button-content {
      background-color: $bg-color-dark-theme-2;
    }
  }

  page-bitpay-card-topup {
    ion-content {
      ion-item {
        background-color: $bg-color-dark-theme;
        color: $text-color-dark-theme;
      }
    }
  }

  page-wallet-details,
  page-coinbase-account,
  page-bitpay-card {
    ion-content {
      background: $bg-color-dark-theme;
    }

    .toolbar-background {
      background: $bg-color-dark-theme !important;
    }

    .search-button img {
      filter: invert(1);
    }

    .ion-ios-more:before {
      filter: invert(1);
    }

    .wallet-info {
      .left-buttons {
        .encrypted,
        .testnet {
          filter: invert(1);
        }

        .read-only {
          filter: invert(0);
        }

        .square-border {
          span {
            border: 1px solid $text-color-dark-theme;
          }
        }
      }
    }

    .action-buttons {
      .button-standard {
        color: $text-color-dark-theme;
      }
    }

    .balance-card {
      background: $bg-color-dark-theme;
    }

    .tx-history {
      .tx-history-header {
        &.item {
          background: #212121;
        }
      }

      .item {
        background-color: $bg-color-dark-theme-2;
        color: $text-color-dark-theme;

        &.warning-background {
          background-color: $bg-color-dark-theme-3;

          ion-note.note > .amount > .received,
          .action {
            color: color($colors, warning);
          }
        }

        &.danger-background {
          background-color: $bg-color-dark-theme-3;

          ion-note.note > .amount > .received,
          .action {
            color: color($colors, danger);
          }
        }

        .item-inner {
          border-bottom: 1px solid $border-color-dark-theme;
        }
      }
    }

    .white-card {
      background: $bg-color-dark-theme-2;
      color: $text-color-dark-theme;
    }
  }

  page-copayers {
    .white-card {
      background: $bg-color-dark-theme;
      color: $text-color-dark-theme;

      .timeline-content-icon ion-icon {
        &[name='ios-time-outline'] {
          filter: invert(1);
        }
      }
    }
  }

  .tx-history {
    .icon-services {
      border: 1px solid $text-color-dark-theme-2;
    }

    .amount {
      color: $text-color-dark-theme;
    }

    .date {
      color: $text-color-dark-theme-2;
    }
  }

  wallet-receive,
  page-choose-fee-level {
    .addr-header {
      .addr-title {
        color: $text-color-dark-theme;
      }

      .addr-buttons .addr-update {
        background-color: $bg-color-dark-theme-3;
      }
    }

    .addr-content {
      .addr-container {
        .text-address {
          background-color: $bg-color-dark-theme-3;
          color: $text-color-dark-theme-3;
        }
      }

      .qr-container {
        .lines-background {
          background: url(../assets/img/curved-lines-background.png) center
            center no-repeat $bg-color-warning;
          opacity: 0.1;
        }
      }
    }

    .close-btn {
      button {
        color: $text-color-dark-theme;
      }
    }

    .segment-button {
      color: $text-color-dark-theme;
    }
  }

  page-send,
  page-multi-send,
  page-select-inputs,
  page-proposals-notifications {
    .amount {
      color: $text-color-dark-theme;
    }

    .address,
    .amount-str {
      opacity: 1;
      color: $text-color-dark-theme-2;
    }

    .recipient {
      background-color: $bg-color-dark-theme;

      ion-label {
        color: $text-color-dark-theme;
      }
    }

    ion-header .item-divider-exp-header {
      .header-data {
        color: $text-color-dark-theme-2;
      }
    }

    .content-list {
      .item {
        background-color: $bg-color-dark-theme;

        .item-inner {
          border-bottom: 1px solid $border-color-dark-theme;
        }
      }

      .item-divider-header {
        &.item {
          background: $bg-color-dark-theme-2;
          color: $text-color-dark-theme-2;
        }
      }
    }

    .total-inputs {
      &-str {
        color: $text-color-dark-theme;
      }
    }

    .send-header-wrapper {
      background-color: $bg-color-dark-theme;
    }

    .uri-header-wrapper {
      background-color: $bg-color-dark-theme;
    }

    .search-wrapper {
      .scan-icon {
        border-left: 1px solid rgba(151, 151, 151, 0.2);
      }
    }

    .invalid {
      border: 1px solid color($colors, error);
      color: color($colors, error);
    }

    ion-checkbox {
      .checkbox-icon {
        border-color: color($colors, primary);
        background-color: $bg-color-dark-theme;
      }
    }

    .txp-container {
      background-color: $bg-color-dark-theme;
    }
  }

  create-new-wallet {
    .zero-state-wallets {
      background-color: $bg-color-dark-theme-3;
    }
  }

  // 5.3 - Tab Cards
  page-cards {
    .card-item {
      background: $bg-color-dark-theme;
    }
  }

  buy-card-page {
    .amount-box {
      background-image: linear-gradient(
        -180deg,
        $bg-color-dark-theme 30%,
        $gradient-dark-theme 100%
      );

      .discount-header {
        background-color: $bg-color-dark-theme-2;
        color: $text-color-dark-theme;
        border-bottom: 1px solid rgba(247, 247, 247, 0.02);
      }
    }

    .buy-box {
      background-color: #171717;
    }
  }

  card-catalog-page {
    .card-list-item {
      background: none;

      &__label {
        color: $text-color-dark-theme;
      }
    }

    .category-item {
      background: none;

      ion-label {
        color: $text-color-dark-theme;
      }

      &:after {
        background-color: $bg-color-dark-theme-2;
      }
    }

    .no-results {
      &__title {
        color: $text-color-dark-theme;
      }

      &__subtitle {
        color: $text-color-dark-theme-3;
      }
    }
  }

  card-catalog-page,
  merchant-page {
    .section-divider {
      background: $bg-color-dark-theme-2;
    }
  }

  merchant-page {
    .cover {
      background-image: linear-gradient(180deg, #121212 0%, #1d1d1d 100%);
    }

    .body {
      &__title,
      &__subtitle {
        color: $text-color-dark-theme;
      }

      &__caption,
      &__instructions {
        color: $text-color-dark-theme-2;
      }
    }
  }

  page-bitpay-phase-one-card-intro {
    .phaseOne {
      &__content {
        &__title {
          color: $text-color-dark-theme;
        }

        &__description {
          color: $text-color-dark-theme-3;
        }
      }

      &__form {
        &__link {
          color: color($colors, primary);
        }
      }

      &__form-toggle {
        &__label {
          color: $text-color-dark-theme-3;
          font-size: 14px;
          line-height: 18px;
        }
      }
    }
  }

  // 5.4 - Tab Settings
  page-settings,
  page-about,
  page-add-wallet {
    .bp-list {
      ion-note.note {
        background: $bg-color-dark-theme-2;
        color: $text-color-dark-theme-2;
      }

      ion-icon.item-img.icon {
        &.icon-md.item-icon,
        &.icon-ios.item-icon {
          &.ionic-icon {
            color: #555a60;
          }
        }
      }

      .icon-qrcode {
        filter: invert(1);
      }
    }
  }

  page-alt-currency,
  page-country-selector,
  page-key-settings,
  page-wallet-information,
  page-wallet-addresses,
  page-wallet-settings {
    .bp-list.settings-list {
      ion-item.item,
      button.item {
        .item-inner {
          ion-note.note {
            background: $bg-color-dark-theme-2;
            color: $text-color-dark-theme-2;
          }
        }
      }
    }
  }

  page-addressbook-add,
  page-join-wallet {
    ion-item {
      background: $bg-color-dark-theme;
      color: $text-color-dark-theme-2;
    }
  }

  page-addressbook {
    .zero-state-icon {
      background-color: $bg-color-dark-theme-3;
    }
  }

  page-wallet-addresses {
    button.item {
      background: $bg-color-dark-theme;
    }
  }

  page-scan {
    .page-scan-has-problems {
      background-color: $bg-color-dark-theme-toolbar;

      .body {
        background-color: $bg-color-dark-theme-toolbar;

        div {
          color: $bg-color-dark-theme-toolbar;
        }
      }
    }
  }

  card-details-page {
    background-color: $bg-color-dark-theme;

    .gift-card-content .scroll-content > div.wrapper {
      background-color: $bg-color-dark-theme;
    }

    .card-image {
      img {
        background: $bg-color-dark-theme;
      }
    }

    .card-info {
      background-color: $bg-color-dark-theme-3;
      border: 1px solid $border-color-dark-theme;

      &__title {
        color: $text-color-dark-theme-2;
      }

      &__body {
        color: $text-color-dark-theme;
      }

      &__date {
        color: $text-color-dark-theme-3;
      }

      &.has-pin {
        .separator {
          border-top: 1px solid $border-color-dark-theme;
        }
      }
    }
  }

  page-share {
    .share-buttons {
      background-color: $bg-color-dark-theme;
    }
  }

  // 6 - Other Pages
  page-amount {
    ion-content.content {
      background-color: $bg-color-dark-theme;
    }
  }
  page-simplex,
  page-wyre {
    .buy-crypto-button {
      color: $text-color-dark-theme;
    }
  }

  page-add,
  page-select-currency,
  page-coin-selector,
  select-invoice-page {
    .list-button {
      .item-title {
        color: $text-color-dark-theme;
      }

      .item-subtitle {
        color: $text-color-dark-theme-2;
      }
    }
  }

  page-import-wallet,
  page-create-wallet,
  page-create-eth-multisig,
  page-bitpay-phase-one-card-intro {
    ion-item {
      background: $bg-color-dark-theme;
      color: $text-color-dark-theme;
    }
  }

  page-create-wallet,
  page-create-eth-multisig,
  page-join-wallet {
    .linked-wallet {
      color: $text-color-dark-theme;
      background-color: $bg-color-dark-theme;
    }
  }

  page-create-eth-multisig {
    .multisig-input {
      background-color: $bg-color-dark-theme;
      .search-wrapper {
        background-color: $bg-color-dark-theme-2;
        color: $text-color-dark-theme-2;
        &.invalid {
          border: 1px solid color($colors, error);
          color: color($colors, error);
        }
      }
    }
  }

  phone-sheet {
    .country__label {
      color: white;
    }
  }

  email-component,
  phone-sheet,
  phone-page {
    .title {
      color: $text-color-dark-theme;
    }

    .sub-title {
      color: $text-color-dark-theme;
    }

    ion-item,
    ion-item.item-toggle ion-label {
      background: $bg-color-dark-theme-2;
      color: $text-color-dark-theme;
    }
  }

  phone-page {
    ion-item,
    ion-item.item-toggle ion-label {
      background: $bg-color-dark-theme;
    }
    .phone-input {
      color: white;
      $phone-input-border-color-dark-theme: rgba(255, 255, 255, 0.4);
      border-bottom-color: $phone-input-border-color-dark-theme;

      &__country-code {
        border-color: $phone-input-border-color-dark-theme;
      }
    }
  }

  page-send-feedback {
    .msg-to-user {
      background: $bg-color-dark-theme;

      .feedback-title {
        color: $text-color-dark-theme;
      }

      .feedback-msg {
        color: $text-color-dark-theme;
      }
    }

    .user-feedback-card {
      background-color: $bg-color-dark-theme-2;

      .user-feedback-title {
        color: $text-color-dark-theme;
      }
    }
  }

  page-key-onboarding {
    .key-onboarding-slides {
      ion-slide {
        background: linear-gradient(
          to bottom,
          $bg-color-dark-theme,
          $gradient-dark-theme 80%
        );
      }

      .slide-info {
        background: $bg-color-dark-theme;

        .info .title,
        .title {
          color: $text-color-dark-theme;
        }

        .info .text,
        .text {
          color: $text-color-dark-theme-2;
        }
      }
    }

    .toolbar {
      .toolbar-background {
        background: $bg-color-dark-theme;
      }
    }

    .checkbox-list {
      .external-link {
        color: $text-color-dark-theme-2;
      }

      .text {
        color: $text-color-dark-theme;
      }
    }

    .swiper-pagination-bullet {
      background-color: $text-color-dark-theme-2;
    }
  }

  page-backup-key,
  page-backup-game {
    ion-content.content {
      background: $bg-color-dark-theme;
    }

    .key-container,
    .grid-container > .key-container {
      .word-container,
      .word-container > .word-slides {
        .word-title {
          color: $text-color-dark-theme;
        }

        .word {
          background: $bg-color-dark-theme-2;
          color: $text-color-dark-theme;

          .dash-line {
            border-bottom: 1px $border-color-dark-theme dashed;
          }
        }
      }
    }

    .grid-container > .mnemonic-words-container {
      .mnemonic-words {
        .words {
          .button {
            background-color: $bg-color-dark-theme-2;
            color: $text-color-dark-theme;
          }
        }
      }
    }
  }

  page-coinbase {
    ion-content {
      .center-header .button-clear-md-dark {
        color: $text-color-dark-theme;
      }
    }
  }

  page-custom-amount {
    .qr-card-amount {
      background-color: $bg-color-dark-theme;
    }

    .qr-container {
      background-color: $bg-color-dark-theme;

      div.qr-card.card {
        background-color: $bg-color-dark-theme;
      }

      .qr-card {
        background-color: white;
      }
    }

    .receive-content {
      background-color: $bg-color-dark-theme;

      .addr-container {
        .text-address {
          background: $bg-color-dark-theme-2;
          color: $text-color-dark-theme-2;
        }
      }
    }
  }

  card-terms {
    .terms * {
      color: $text-color-dark-theme-3;
    }
  }

  page-card-item {
    .card-icon {
      .houston {
        img {
          filter: invert(1);
        }
      }
    }
  }

  page-session-log {
    .filter-container {
      .labels {
        color: $text-color-dark-theme;
      }
    }
  }

  // 7 - Buy Crypto
  page-crypto-order-summary {
    .bp-list {
      .card {
        background: $bg-color-dark-theme;
        .item {
          &.item-ios,
          &.item-md {
            background-color: $bg-color-dark-theme-2;
            ion-note {
              img {
                filter: brightness(0.5);
              }
            }
          }
        }
      }
    }
  }
  page-crypto-payment-method {
    .item-img img {
      filter: brightness(0.5);
    }
  }
  page-crypto-offers {
    .bp-list {
      .summary-description {
        color: $text-color-dark-theme;
      }
    }
  }
  page-crypto-coin-selector {
    .bp-list {
      .available-wallets {
        &-container {
          background-color: $bg-color-dark-theme-2;
        }
        &-label {
          color: $text-color-dark-theme-2;
        }
      }
    }
  }
  ion-col {
    .ellipsis {
      color: $text-color-dark-theme;
    }
  }

  // 8 - Exchange Crypto

  page-exchange-crypto {
    .amount .amount-container {
      background-color: $bg-color-dark-theme-2;
      color: $text-color-dark-theme-2;
    }
    .divider {
      border-bottom: 1px solid $border-color-dark-theme;
      .arrow img {
        filter: brightness(0.6);
      }
    }
    .partner {
      color: $text-color-dark-theme-2;
    }
  }

  // 9 - Onboarding
  page-feature-education,
  page-recovery-key,
  page-lock-method {
    .onboarding-slides ion-slide .slide-zoom .slide-info,
    .recovery-key-info,
    .lock-method-info {
      .info {
        .title {
          color: $text-color-dark-theme;
        }
        .text {
          color: $text-color-dark-theme-2;
        }
        .note {
          color: $text-color-dark-theme-3;
        }
      }
    }
  }
  page-disclaimer {
    background-color: $bg-color-dark-theme;
    .checkbox-list {
      .term-container {
        background-color: $bg-color-dark-theme-2;
        .term {
          &-title {
            color: $text-color-dark-theme;
          }
          &-note {
            color: $text-color-dark-theme-2;
          }
        }
      }
      .term-container.bg-none {
        .term-note {
          color: $text-color-dark-theme;
        }
      }
      .checkbox-icon {
        border-color: $bg-color-dark-theme-3;
      }
    }
    ion-footer {
      background-color: $bg-color-dark-theme;
    }
    .disclaimer-footer {
      background-color: $bg-color-dark-theme;
      box-shadow: 0 -15px 22px -10px $bg-color-dark-theme-3;
    }
  }
  page-add-funds {
    background-color: $bg-color-dark-theme;
    ion-list {
      .option-container {
        background-color: $bg-color-dark-theme-2;
        box-shadow: none;
        .info {
          .title {
            color: $text-color-dark-theme;
          }
          .note {
            color: $text-color-dark-theme-2;
          }
        }
      }
    }
    .disclaimer-footer {
      background-color: $bg-color-dark-theme;
    }
  }

  // 10 - New Features Slides
  page-new-feature {
    .new-feature-slides ion-slide {
      .supperior-container {
        background: linear-gradient(180deg, #606060 0%, #202124 100%);
        .page-title {
          color: #ffffff;
        }
      }
      .slide-info {
        background-color: #000000;
        .title {
          color: #ffffff;
        }
        .text {
          color: #ffffff;
        }
      }
    }
  }
}
